<template>
  <view>
    <uv-navbar
      class="bold-title" 
      title="视频监控" 
      @leftClick="leftClick"
      :safeAreaInsetTop="true"
      :placeholder="true"
      :height="'44px'"
    ></uv-navbar>
    <view class="body">
	  <view class="data" style="position: sticky; top: 0; background-color: #f3f5f8;">
	    数量 {{ monitorList.length }}
	  </view>
      <view class="sp" v-for="(item, index) in monitorList" :key="index" @click="goToVideo(item)">
        <image class="sp1" :src="getFullImagePath(item.F_Headimg)" mode="aspectFill">
          <view class="image-caption">
            <text class="fyc">{{ item.F_Org_Id }}</text>
            <text class="num">{{ item.F_Code }}</text>
          </view>
        </image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getvideo } from '@/api/home.js';

const monitorList = ref([]);

const goBack = () => {
  uni.navigateBack();
};

const leftClick = () => {
  uni.navigateBack();
};

onMounted(() => {
  fetchMonitorPoints();
});

const fetchMonitorPoints = async () => {
  try {
    const response = await getvideo({ page: 1, pageSize: 10 });
    console.log(response);
    if (response.code === 200) {
      monitorList.value = response.data;
      console.log(monitorList.length);
    } else {
      uni.showToast({
        title: '获取失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('请求接口失败', error);
    uni.showToast({
      title: '请求失败',
      icon: 'none'
    });
  }
};

const getFullImagePath = (relativePath) => {
  // 假设你的图片服务器地址是 http://8.137.157.16:9999
  return `http://8.137.157.16:9999${relativePath}`;
};

const goToVideo = (item) => {
  // 跳转到视频播放页面，并传递视频地址
  console.log(item.F_Token);
  console.log(item.F_Address);
  uni.navigateTo({
    url: `/pages/videoPlayer/videoPlayer?address=${encodeURIComponent(item.F_Address)}`
  }).catch(err => {
    console.error('跳转失败', err);
    uni.showToast({
      title: '页面跳转失败',
      icon: 'none'
    });
  });
};
</script>

<style scoped lang="scss">
.bold-title {
  font-weight: bold;
}
.body {
  width: 750rpx;
  height: 1400rpx;
  background-color: #f3f5f8;
  padding-top: 40rpx;
  .data {
    margin-left: 28rpx;
    margin-bottom: 26rpx;
    color: #6a6a6a;
    font-weight: 549;
  }
  .sp {
    width: 694rpx;
    height: 490rpx;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 2px solid #dedede;
    .sp1 {
      width: 694rpx;
      height: 340rpx;
      border-radius: 20rpx;
      position: relative;
    }
    .image-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 694rpx;
      height: 70rpx;
      background-color: rgb(0,0,0,0.5);
      color: white;
      border-radius: 0 0 20rpx 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.fyc {
  font-size: 28rpx;
  margin-left: 26rpx;
}
.num {
  font-size: 20rpx;
  margin-right: 20rpx;
}
</style>